{__NOLAYOUT__}
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>A3Mall | Dashboard</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="{__SYSTEM_PATH__}/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="{__SYSTEM_PATH__}/font/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="{__SYSTEM_PATH__}/js/layui/css/layui.css">
    <link rel="stylesheet" href="{__SYSTEM_PATH__}/css/base.css">
    <script src="{__SYSTEM_PATH__}/js/jquery/jquery.min.js"></script>
    <script src="{__SYSTEM_PATH__}/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="{__SYSTEM_PATH__}/js/layui/layui.js"></script>
    <script src="{__SYSTEM_PATH__}/js/common/common.js"></script>
    <script src="{__SYSTEM_PATH__}/js/common/common.js"></script>
    <script src="{__SYSTEM_PATH__}/js/qrcode.min.js"></script>
<style>
    .field {
        padding:5px 15px;
    }
    .text {
        padding:5px 15px 5px 5px;
    }
    .layui-elem-field {
        margin: 15px 0;
    }
</style>
</head>
<body style="padding:10px 30px;">

<section class="content clearfix">
    <?php if(empty($jobDetails)) { ?>
        <p style="line-height: 250px;font-size: 50px;text-align:center;">任务不存在</p>
    <?php } else { ?>
        <div class="layui-row">
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">任务名称</span><span class="text" ><?=$jobDetails['name']?> 【<?=$jobDetails['statusText']?>】</span>
            </div>
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">用户</span><span class="text" ><?=$jobDetails['publisher']['nickname']?></span>
            </div>
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">任务类型</span><span class="text" ><?=$jobDetails['job_type']['name']?></span>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">任务单号</span><span class="text" ><?=$jobDetails['job_no']?></span>
            </div>
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">发布时间</span><span class="text" ><?=date('Y-m-d H:i',$jobDetails['publish_time'])?></span>
            </div>
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">到期时间</span><span class="text" ><?=date('Y-m-d H:i',$jobDetails['exp_time'])?></span>
            </div>

        </div>
        <fieldset class="layui-elem-field layui-field-title">
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">接单数 / 发布数</span><span class="text" ><?=$jobDetails['accept_num']?> / <?=$jobDetails['num']?></span>
            </div>
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">完成数 / 失败数</span><span class="text" ><?=$jobDetails['accept_finish_num']?> / <?=$jobDetails['accept_fail_num']?></span>
            </div>
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">未完成数</span><span class="text" ><?=$jobDetails['accept_executing_num']?></span>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title">
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">任务单价</span><span class="text" ><?=$jobDetails['price'] -0?> 元</span>
            </div>
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">总价</span><span class="text" ><?=$jobDetails['total_amount'] -0?> 元</span>
            </div>
            <div class="layui-col-xs4">
                <span class="layui-bg-blue field">已支付 / 剩余冻结</span><span class="text" ><?=$jobDetails['payment'] -0?> 元 / <?php echo ($jobDetails['status'] ==1)?(bcsub($jobDetails['total_amount'],$jobDetails['payment'],2)-0 . ' 元'):'-' ?></span>
            </div>
        </div>
        <div class="layui-form" style="margin-top:20px;">
            <table class="layui-table">
                <thead>
                <tr>
                    <th style="width:33%">任务详情</th>
                    <th style="width:33%">任务链接：<?=$jobDetails['task_link']?></th>
                    <th>验证图片</th>
                </tr>
                </thead>
                <tbody>
                <tr style="height:150px;">
                    <td style="vertical-align: top"><?=$jobDetails['requirement']['requirement']?></td>
                    <td><div id="qrcode"></div></td>
                    <td >
                        <?php  foreach($jobDetails['images'] as $image) { ?>
                            <img style="height:120px;"  attr-type="1" attr-src-big="<?=$image['url']?>" src="<?=$image['thumb']?>" />
                        <?php }?>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>


        <div class="layui-list-box">
            <table class="layui-hide" id="list-box" lay-filter="list-box" attr-url="<?php echo createUrl("order.index/index?job_id=" . $jobDetails['id']); ?>"></table>
        </div>
        <script type="text/html" id="list-toolbar">
            <div class="layui-btn-container">
                <!--         <button lay-event="url" type="button" class="layui-btn layui-btn-sm layui-bg-light-blue"><i class="layui-icon">&#xe61f;</i> 添加</button> -->
               <div class="layui-btn layui-btn-sm" href="javascript:void(0)" style="pointer-events: none;">接单任务详情</div>
            </div>
        </script>
    <?php }?>
</section>

<script>

    layui.config({
        base: "{__SYSTEM_PATH__}/js/layui/extend/"
    }).use(['table','dropdown','form','laydate'], function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var form = layui.form;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#publish_time'
            ,type: 'datetime'
            ,range: '~'
        });
        laydate.render({
            elem: '#exp_time'
            ,type: 'datetime'
            ,range: '~'
        });
        table.render({
            elem: '#list-box'
            , url: $('table[attr-url]').attr('attr-url')
            , toolbar: '#list-toolbar'
            , defaultToolbar: []
            , title: '数据表'
            , cols: [[
                {type: 'checkbox'}
                , {field: 'username', title: '用户',width:180}
                , {field: 'failure_reason', title: '不通过原因',align:'center'}
                , {field: 'status_name', title: '状态',width:200,align:'center'}
                , {field: 'createTime', title: '接单时间',width:130,align:'center'}
                , {field: 'submitTime', title: '提交时间',width:130,align:'center'}
                , {field: 'appealTime', title: '维权时间',width:130,align:'center'}
                , {title: '自动处理',width:130, align: 'center', templet: function(res){

                        var str = '';
                        if(res.is_closed || res.status==4){
                            str += '-';
                        } else {
                            str += res.waitTxpire;
                        }
                        return str;
                    }}
                , {title: '已付款',width:90, align: 'center', templet: function(res){

                        var str = '';
                        if(res.is_closed){
                            str += res.amount - 0;
                        } else {
                            str += '-';
                        }
                        return str;
                    }}
                , {field: 'images', title: '完成图',align:'center'}
                , {fixed: 'right', align: 'center', title: '操作', width: 100, templet: function(res){
                        var str = '';
                        if(res.status==4){
                            str += '<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="judge">判罚</a>';
                        }
                        return str;
                    }}
            ]]
            , done: function (res) {
                dropdown.suite();
                $('td[data-field=images]').each(function () {
                    $div = $(this).find('div');
                    var images = $div.html();

                    $div.html('');
                //    $div.parent().parent().parent().css({'height':"50px"})

                    if(images) {
                        images = images.split('|');
                        for(let i in images){
                            image = images[i].split(',');
                            $div.append('<img style="height:30px;margin-right:5px;" attr-type="2" attr-src-big="' + image[1] + '" src="' + image[0] + '">')
                        }
                    }
                    $div.find('img[attr-type=2]').click(function(){
                        showBig($(this).attr('attr-src-big'));
                    })
                })
            }
            , page: true
            , id: 'list-table'

            // ,limit:30
        });



        $("#search-btn").on("click",function (){
            //执行重载
            table.reload('list-table', {
                page: {
                    curr: 1
                }
                ,where: {
                    key: {
                        job_id:$('table[attr-id=]').attr('attr-id'),
                        type_id : $('[name="type_id"]').val(),
                        status : $('[name="status"]').val(),
                        publisher : $('[name="publisher"]').val(),
                        job_no : $('[name="job_no"]').val(),
                        publish_time : $('[name="publish_time"]').val(),
                        exp_time : $('[name="exp_time"]').val()
                    }
                }
            }, 'data');
        });

        //头工具栏事件
        table.on('toolbar(list-box)', function (obj) {
            switch (obj.event) {
                case 'url':
                    window.location.href = "{:createUrl('editor')}";
                    break;
                case 'refresh':
                    window.location.reload();
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(list-box)', function (obj) {
            var data = obj.data;
            if(obj.event == 'details') {
                showDetails(data.id,data.name);
            } else if (obj.event === 'del') {
                layer.confirm('你确定要删除吗？', function (index) {
                    $.get('{:createUrl("delete")}',{
                        id : data.id
                    },function(result){
                        layer.close(index);
                        if(result.code){
                            obj.del();
                        }else{
                            layer.msg(result.msg,{ icon : 2 });
                        }
                    },"json");
                });
            } else if(obj.event == 'judge'){
                layer.open({
                    type: 2,
                    title: '判罚',
                    shadeClose: true,
                    shade: 0.3,
                    area: ['25%', '48%'],
                    content: '{:createUrl("order.index/judge")}?id='+data.id
                });
            }
        });

        //监听单元格编辑
        table.on('edit(list-box)', function(obj){
            $.get('{:createUrl("field")}',{
                name : obj.field,
                value : obj.value,
                id : obj.data.id
            },function (result){
                if(!result.code){
                    layer.msg(result.msg,{ icon : 2 });
                }
            },"json");
        });


        /**
         * 显示详情
         * @param id
         * @param title
         */
        function showDetails(id,title) {
            layer.open({
                type: 2,
                title: title,
                shadeClose: true,
                shade: 0.3,
                area: ['70%', '70%'],
                content: '{:createUrl("details")}?id='+id
            });
        }


        $('img[attr-type=1]').click(function(){
            showBig($(this).attr('attr-src-big'));
        })
    });

    function showBig(src) {
        layer.photos({
            photos: {"data": [{"src":src}]},
            anim: 0
        });
    }
</script>

<script type="text/javascript">
    <?php if(!empty($jobDetails['task_link'])){ ?>
         new QRCode(document.getElementById("qrcode"), "<?=$jobDetails['task_link']?>");  // 设置要生成二维码的链接
    <?php } ?>
</script>

</body>
</html>
